import React, { useState, useRef } from 'react'

import "./App.css"

export default function App() {
  const ref1 = useRef()
  const ref11 = useRef()
  const ref12 = useRef()
  const ref2 = useRef()
  const ref21 = useRef()
  const ref211 = useRef()
  const ref3 = useRef()
  // 已展开节点为空,表示除当前节点及其父节点之外的所有节点都被折叠,如果当前节点为null,则所有节点都被折叠,这也是初始状态
  const [expandRef, setExpandRef] = useState(null)

  const expand = (ref)=>{
    return ()=>{
      const parents = retrieveParents(ref.current.parentNode)
      if(expandRef===null){
        console.log("已展开节点为空时,设置已展开节点为当前节");
        setExpandRef(ref)
      }else if(ref.current.isSameNode(expandRef.current)){
        console.log("当前节点是已展开的节点,设置已展开节点为空");
        setExpandRef(null)
      }else{
        console.log("当前节点不是已展开的节点...");
        if(parentNotExpand(expandRef.current, parents)){
          console.log("当前节点的父节点不是已展开的节点时, 折叠已展开节点");
          expandRef.current.style.display = "none"
          const expandedParents = retrieveParents(expandRef.current)
          expandedParents.forEach(e=>e.style.display="none")
          const expandedChildren = retrieveChildren(expandRef.current)
          expandedChildren.forEach(e=>e.style.display="none")
          setExpandRef(ref)
        }else{
          console.log("当前节点的父节点是已展开的节点时, 折叠同级菜单节点");
          const sibling = retrieveSibling(ref.current)
          sibling.forEach(s=>s.style.display="none")
        }
      }
      switchFold(ref.current)
    }
  }

  // 切换节点的折叠状态
  const switchFold = (node)=>{
    if(node.style.display==="block"){
      node.style.display="none"
    }else{
      node.style.display="block"
    }
  }

  // 当前节点的父节点不包含已展开的节点
  const parentNotExpand = (node, parents)=>{
    return parents.findIndex(p=>p.isSameNode(node))===-1
  }
  
  // 是否菜单节点
  const isMenu = (node)=>{
    return node.nodeName==="UL" && node.parentNode.nodeName==="LI" && node.parentNode.parentNode.nodeName==="UL"
  }

  // 检索出父菜单节点
  const retrieveParents = (node)=>{
    let parents = []
    if(node){
      if(isMenu(node)) parents.push(node)
      parents.push(...retrieveParents(node.parentNode))
    }
    return parents
  }

  // 检索子菜单节点
  const retrieveChildren = (node)=>{
    let children = []
    if(isMenu(node)){
      let childNodes = node.childNodes
      for(let i=0; i<childNodes.length; i++){
        if(childNodes[i].nodeType===1 && childNodes[i].nodeName==="LI"){
          let childs = childNodes[i].childNodes
          for(let i=0; i<childs.length; i++){
            if(childs[i].nodeType===1 && childs[i].nodeName==="UL"){
              children.push(childs[i])
              children.push(...retrieveChildren(childs[i]))
            }
          }
        }
      }
    }
    return children
  }

  // 检索出兄弟菜单节点
  const retrieveSibling = (node)=>{
    let sibling = []
    if(isMenu(node)){
      let childNodes = node.parentNode.parentNode.childNodes
      for(let i=0; i<childNodes.length; i++){
        if(childNodes[i].nodeType===1 && childNodes[i].nodeName==="LI"){
          let childs = childNodes[i].childNodes
          for(let i=0; i<childs.length; i++){
            if(childs[i].nodeType===1 && childs[i].nodeName==="UL"){
              sibling.push(childs[i])
            }
          }
        }
      }
      sibling = sibling.filter(bro=>!bro.isSameNode(node))
    }
    return sibling
  }

  return (
    <nav>
    <ul>
      <li>
        <a href="#" onClick={expand(ref1)}>101</a>
        <ul ref={ref1}>
          <li>
            <a href="#" onClick={expand(ref11)}>1011</a>
            <ul ref={ref11}>
              <li><a href="#">10111</a></li>
              <li><a href="#">10112</a></li>
            </ul>
          </li>
          <li>
            <a href="#" onClick={expand(ref12)}>1012</a>
            <ul ref={ref12}>
              <li><a href="#">10121</a></li>
              <li><a href="#">10122</a></li>
            </ul>
          </li>
          <li><a href="#">1013</a></li>
        </ul>
      </li>
      <li>
        <a href="#" onClick={expand(ref2)}>102</a>
        <ul ref={ref2}>
          <li>
            <a href="#" onClick={expand(ref21)}>1021</a>
            <ul ref={ref21}>
              <li>
                <a href="#" onClick={expand(ref211)}>10211</a>
                <ul ref={ref211}>
                  <li><a href="#">102111</a></li>
                  <li><a href="#">102112</a></li>
                </ul> 
              </li>
              <li><a href="#">10212</a></li>
            </ul>
          </li>
          <li><a href="#">1022</a></li>
          <li><a href="#">1023</a></li>
        </ul>
      </li>
      <li>
        <a href="#" onClick={expand(ref3)}>103</a>
        <ul ref={ref3}>
          <li><a href="#">1031</a></li>
          <li><a href="#">1032</a></li>
          <li><a href="#">1033</a></li>
        </ul>
      </li>
    </ul>
  </nav> 
  )
}
